import { FC, memo, useState } from 'react'
import { TopNavigateWrapper } from './style'

interface IState {
  children?: React.ReactNode
  chooseItem: (item: any) => void
}

const TopNavigate: FC<IState> = memo((poprs) => {
  const { chooseItem } = poprs
  // 数据
  const optionData = [
    {
      name: '文章',
      url: '/share/article'
    },
    {
      name: '随记',
      url: 'https://www.baidu.com'
    }
  ]

  // 切换选中菜单
  const [currendtIndex, setCurrentIndex] = useState(0)
  const choose = (item: (typeof optionData)[0], index: number) => {
    chooseItem && chooseItem(item)
    setCurrentIndex(index)
  }

  return (
    <TopNavigateWrapper>
      {optionData.map((item, index) => {
        return (
          <div
            key={item.name}
            className={`item ${index === currendtIndex ? 'active' : ''}`}
            onClick={() => choose(item, index)}
          >
            {item.name}
          </div>
        )
      })}
    </TopNavigateWrapper>
  )
})

export default TopNavigate
